<!--
 * @Author: your name
 * @Date: 2021-08-25 18:24:32
 * @LastEditTime: 2021-08-26 10:57:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /web-blog/src/pages/dashboard/personal/personal.vue
-->

<template>
  <div>
    <a-card>
      <div class="flex">
        <a-avatar :size="64" src="https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"/>
        <div class="headeTitle">
          <div class="name">上午好，JACK</div>
          <div class="role">前端开发工程师</div>
        </div>
      </div>
    </a-card>
    <a-card class="formnIformation">
      <div>
        <a-upload
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">
              头像
            </div>
          </div>
        </a-upload>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="网站名" has-feedback validate-status="success">
            <a-input id="success" placeholder="请输入网址名" style="width: 300px;"/>
          </a-form-item>
          <a-form-item label="备案号" has-feedback validate-status="success">
            <a-input id="success" placeholder="请输入备案号" style="width: 300px;"/>
          </a-form-item>
          <a-form-item label="网站信息" has-feedback validate-status="success">
            <a-input id="success" placeholder="请输入网站信息" style="width: 300px;"/>
          </a-form-item>
          <a-form-item label="职位" has-feedback validate-status="success">
            <a-input id="success" placeholder="请输入职位" style="width: 300px;"/>
          </a-form-item>
          <a-form-item label="Github" has-feedback validate-status="success">
            <a-input id="success" placeholder="请输入Github" style="width: 300px;"/>
          </a-form-item>
          <a-form-item>
            <a-button type="primary"
                      icon="check"
                      class="sumbit">提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 1 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 1 },
        sm: { span: 1},
      },
      loading: false,
      imageUrl: '',
    }
  },
  methods: {
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  }
}
</script>

<style lang="less" scoped>
.flex {
  display: flex;
}

.headeTitle {
  margin-top: 2px;
  margin-left: 20px;
}

.name {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 10px;
}

.role {
  color: rgba(0, 0, 0, 0.45);
}

.formnIformation {
  margin-top: 20px;
}

.avatar-uploader {
  margin-left: 86px;
}

.sumbit {
  margin-left: 460px;
}
</style>